<template>
  <view class="signature">
    <uv-navbar
      title="完结签字"
      placeholder
      bg-color="transparent"
      auto-back
      left-icon-color="#757575"
      title-style="color: #000000; font-size: 32rpx"
    />
    <view class="signature-content">
      <uv-text text="备注信息" size="28rpx" color="#212121" margin="0 0 20rpx 0" />
      <uv-textarea v-model="remark" height="200rpx" placeholder="请输入备注信息" />
      <uv-text text="电子签名" size="28rpx" color="#212121" margin="20rpx 0" />
      <view v-if="generateSignUrl" class="sign-img">
        <image :src="webSrc(generateSignUrl)" />
        <uv-icon
          class="sign-del"
          name="trash"
          size="40rpx"
          color="#F00"
          @click="delSign"
        />
      </view>
      <view v-else class="sign-btn" @click="openSign">点击签名</view>
      <uv-text text="选择签章" size="28rpx" color="#212121" margin="20rpx 0" />
      <view v-if="stampUrl" class="sign-img">
        <image :src="webSrc(stampUrl)" />
        <uv-icon
          class="sign-del"
          name="trash"
          size="40rpx"
          color="#F00"
          @click="delSealSign"
        />
      </view>
      <view v-else class="sign-btn" @click="openSealSign">选择签章</view>
      <view class="sign-footer">
        <g-sign-btn
          near
          label="保存"
          :show-time="false"
          :show-tips="false"
          :disabled="!generateSignUrl || !stampUrl"
          @confirm="handleSubmit"
        />
      </view>
    </view>
    <uv-overlay :show="signShow" zIndex="99">
      <view>
        <uv-status-bar />
        <scroll-view
          scroll-x
          scroll-with-animation
          :scroll-into-view="'sign-' + active"
          class="sign-list"
        >
          <view
            class="sign-item"
            :id="`sign-${k}`"
            v-for="(i, k) in signList"
            :key="k"
            :class="{ active: k == active }"
            @click="chooseSign(k)"
          >
            <image :src="webSrc(i.signUrl)" />
          </view>
        </scroll-view>
        <view class="sign-body">
          <g-signature v-if="signShow" ref="signatureRef" @getImg="getSignImage" />
        </view>
        <view class="sign-button confrim" @click="signatureRef.save()">确定</view>
        <view class="sign-button" @click="cancel">取消</view>
      </view>
    </uv-overlay>
    <uv-popup ref="sealRef" zIndex="99">
      <view>
        <scroll-view
          scroll-x
          scroll-with-animation
          :scroll-into-view="'seal-sign-' + sealActive"
          class="seal-sign-list"
        >
          <view
            class="seal-sign-item"
            :id="`seal-sign-${k}`"
            v-for="(i, k) in sealList"
            :key="k"
            :class="{ active: k == sealActive }"
            @click="chooseSealSign(k)"
          >
            <image :src="webSrc(i.signUrl)" />
          </view>
        </scroll-view>
      </view>
    </uv-popup>
  </view>
</template>
<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { webSrc } from "@/common/mothed.js";
import { commonUpload } from "@/request/common.js";
import { getSignData, reportReview } from "@/request/task.js";

const signShow = ref(false); // 签名弹窗
const signList = ref([]); // 签名列表
const sealList = ref([]); // 印章列表
const active = ref(-1); // 签名列表选中项
const sealActive = ref(-1); // 印章列表选中项
const signatureRef = ref(); // 签名组件ref
const sealRef = ref(); // 签章弹窗ref
const stampUrl = ref(""); // 签章图片
const reportId = ref(""); // 报告id
const remark = ref(""); // 备注
const generateSignUrl = ref(""); // 签名url

onLoad((e) => {
  reportId.value = e.id;
  getSignList();
});

// 获取签名列表
const getSignList = () => {
  getSignData({ type: 1, pageNum: 1, pageSize: 100 }).then((res) => {
    if (res.code == 200) {
      signList.value = res.rows;
    }
  });
};

// 选择签名
const chooseSign = (k) => {
  active.value = k;
  generateSignUrl.value = signList.value[k].signUrl;
  signShow.value = false;
};

// 选择印章
const chooseSealSign = (k) => {
  sealActive.value = k;
  stampUrl.value = sealList.value[k].signUrl;
  sealRef.value.close();
};

// 打开签名弹窗
const openSign = () => {
  signShow.value = true;
};

// 打开印章弹窗
const openSealSign = () => {
  getSignData({
    type: 2, // 1:签名 2:印章
    pageNum: 1,
    pageSize: 100,
  }).then((res) => {
    if (res.code == 200) {
      sealList.value = res.rows;
      sealRef.value.open();
    }
  });
};

// 获取签名图片
const getSignImage = (base64) => {
  uni.getImageInfo({
    src: base64,
    success: (image) => {
      commonUpload(image.path).then((res) => {
        if (res.code == 200) {
          generateSignUrl.value = res.fileName;
          signatureRef.value.clear();
          signShow.value = false;
        }
      });
    },
  });
};

// 关闭签名弹窗
const cancel = () => {
  signShow.value = false;
};

// 删除签名
const delSign = () => {
  active.value = -1;
  generateSignUrl.value = "";
};

// 删除印章
const delSealSign = () => {
  sealActive.value = -1;
  stampUrl.value = "";
};

// 提交
const handleSubmit = async () => {
  let res = await reportReview({
    id: reportId.value,
    status: 5,
    reasonForRefusal: remark.value,
    signUrl: generateSignUrl.value,
    stampUrl: stampUrl.value,
  });
  if (res.code == 200) {
    uni.showToast({
      title: "提交成功",
      icon: "none",
      success: () => {
        uni.$emit("report");
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 1000);
      },
    });
  }
};
</script>
<style lang="scss" scoped>
.signature {
  width: 100%;
  height: 100vh;
  padding: 40rpx;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ffffff 0%, #50bc7a 100%);
  .signature-content {
    position: relative;
    width: 100%;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    height: calc(100vh - 44px - var(--status-bar-height) - 80rpx);
    background: linear-gradient(180deg, #ace1b5 0%, #fbfbfb 9%, #fbfbfb 100%);
    box-shadow: 0 0 40rpx 4rpx rgba(78, 167, 112, 0.16);
    border-radius: 40rpx;
    .sign-btn {
      color: #757575;
      font-size: 28rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2rpx solid #dcdfe6;
      border-radius: 8rpx;
    }
    .sign-img {
      height: 230rpx;
      border-radius: 8rpx;
      border: 2rpx solid #dcdfe6;
      position: relative;
      image {
        width: 100%;
        height: 100%;
      }
      .sign-del {
        position: absolute;
        right: 20rpx;
        top: 20rpx;
      }
    }
    .sign-footer {
      position: absolute;
      bottom: 0;
      left: 50%;
    }
  }
}
.sign-list {
  margin: 40rpx;
  width: 670rpx;
  height: 166rpx;
  padding: 20rpx;
  box-sizing: border-box;
  background: #fff;
  white-space: nowrap;
  .sign-item {
    height: 120rpx;
    width: 200rpx;
    display: inline-block;
    margin: 0 10rpx;
    border: 4rpx solid transparent;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .active {
    border: 4rpx solid #5fc785;
  }
}
.seal-sign-list {
  width: 670rpx;
  height: 546rpx;
  padding: 20rpx;
  box-sizing: border-box;
  background: #fff;
  white-space: nowrap;
  .seal-sign-item {
    height: 500rpx;
    width: 630rpx;
    display: inline-block;
    margin: 0 10rpx;
    border: 4rpx solid transparent;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .active {
    border: 4rpx solid #5fc785;
  }
}
.sign-body {
  height: calc(100vh - 44px - var(--status-bar-height) - 508rpx);
  background-color: #fff;
  margin: 0 40rpx;
}
.sign-button {
  margin: 40rpx;
  height: 94rpx;
  background: #ffffff;
  box-shadow: 0 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
  border-radius: 12rpx;
  color: #999999;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  &:active {
    background-color: #f5f5f5;
  }
}
.confrim {
  color: #fff;
  background-color: #4ea770;
  &:active {
    background-color: #5bb67c;
  }
}
</style>
